<template>
    <div style="margin-left: 10px;">
        <div @click.stop="clickItem(item)" v-for="(item, index) in data" :key="index">
            {{item.name}}
            <TreeItem @on-click="clickItem" v-if="item?.children?.length" :data="item.children" />
        </div>
    </div>
</template>

<script setup lang="ts">
// 递归组件第一种: 引入自身
// import TreeItem from './index.vue'

// 这个可以提取一下
type TreeList = {
    name: string,
    icon?:string,
    children?:TreeList[] | []
}
type Props = {
    data?: TreeList[]
}
defineProps<Props>();

const emits = defineEmits(['on-click'])
const clickItem = (item: TreeList) => {
    // console.log(item);
    emits('on-click', item)
}
</script>


<script lang="ts">
    // 递归组件第二种方式： 直接使用name
    export default {
        name: 'TreeItem'
    }
</script>

<style scoped>

</style>